<template>
    <div class="CxjJscsFzXmPftj">
        <j-modal
            class="cglb"
            title="成果类别"
            :visible="visible"
            :width="800"
            :maskClosable="false"
            :switchFullscreen="switchFullscreen"
            @cancel="handleCancel"
        >
            <div class="fztjlist">
                <a-form-model
                    ref="ruleForm"
                    :model="form"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                >
                    <a-row>
                        <a-col>
                            <a-form-model-item ref="leibie" label="成果申报类别" prop="leibie">
                                <a-select v-model="form.leibie" placeholder=""  @change="changeleibie" >
                                    <a-select-option :value="item.fl_bh" v-for="(item, index) in cxjSbList" :key="index">
                                        {{item.fl_mc}}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row v-if="form.leibie==31">
                        <a-col> 
                            <a-form-model-item ref="leibieValue" label="成果申报类别小类">
                                <a-cascader
                                    disabled
                                    v-model="form.leibieValue"
                                    :options="options"
                                    placeholder=""
                                />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row v-else>
                        <a-col> 
                            <a-form-model-item prop="leibieValue" ref="leibieValue" label="成果申报类别小类">
                                <a-cascader 
                                    v-model="form.leibieValue"
                                    :options="options"
                                    placeholder=""
                                />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </div>
            <template slot="footer">
                <a-button class="save_info_btn" type="" @click="handleCancel">取消</a-button>
                <a-button class="save_info_btn" type="primary" @click="save">保存</a-button>
            </template>
        </j-modal>
    </div>
</template>

<script>
import {
    cxjsbLoadTreeRoot,
    cxjgl_lbbc
} from "@/api/manage"
import {
    sysCxjFlCxjsbList,
} from "@/api/api"
    export default {
        name: 'CxjJscsFzXmPftj',
	    props: ['expertFlag', 'cxj_cxj_id', 'flid','xlbh'],
        data() {
            return {
                visible: false,
                switchFullscreen: true,
                labelCol: { span: 6 },
                wrapperCol: { span: 14 },
                cxjSbList: [],
                form: {
                    // 成果申报类别
                    leibie: '',
                    // 成果申报小类
                    leibieValue: []
                },
                options: [],
            }
        },
        watch: {
            expertFlag(next, prev) {
                if (next != prev) {
                    var self = this;
                    self.visible = !self.visible;
                    self.getsysCxjFlCxjsbList();
                }
            }
        },
        methods: {
            handleCancel(){
                this.visible = false;
            },
            save() {
                const self = this;
                this.$refs.ruleForm.validate(valid => {
                    cxjgl_lbbc({fl_bh: self.form.leibie, xl_bh: self.form.leibieValue.join(';'),cxj_cxj_id: self.cxj_cxj_id}).then(res=>{
                        if(res.success) {
                            this.visible = false;
                            this.$emit('update')
                            this.$message.success('修改成功');
                        } else {
                            this.visible = false;
                            this.$message.error(res.message);
                        }
                    })
                });
            },
            getsysCxjFlCxjsbList(){
                sysCxjFlCxjsbList(null).then(res=>{
                    if (res.success) {
                        this.cxjSbList = res.result;
                        this.form.leibie = this.flid;
                        this.form.leibieValue = this.xlbh.split(';');
                        this.getCxjsbLoadTreeRoot(this.flid);
                    }
                })
            },
            changeleibie(value) {
                this.getCxjsbLoadTreeRoot(value)
            },
            getCxjsbLoadTreeRoot(value){
                cxjsbLoadTreeRoot({
                    async: false,
                    pcode: value
                }).then(data=>{
                    if (data.success) {
                        this.loadTreeRoot = data.result;
                        this.options = this.convertAchievementsTree(data.result);
                    } else {
                        this.options = [];
                    }
                })
            },
            convertAchievementsTree(tree) {
                var self = this;
                const result = [];
                // 遍历 tree
                tree.forEach(item => {
                    // 读取 map 的键值映射
                    const value = item.code;
                    const label = item.title;
                    let children = item.children;
                    let children_arr = [];
                    if (item.children && item.children.length) {
                        children_arr = self.convertAchievementsTree(item.children);
                    }
                    // 如果有子节点，递归
                    if (children && children.length > 0) {
                        children = self.convertAchievementsTree(children);
                        result.push({
                            value,
                            label,
                            children
                        });
                    } else {
                        var data = {
                            value,
                            label
                        };
                        result.push(data);
                    }
                });
                return result;
            },
        },
        mounted() {

        }
    }
</script>

<style lang="less">
.cglb {
    &.fullscreen  {
        .ant-modal {
            width: 100%!important;
            top: 0!important;
            height: 100%!important;
            .ant-modal-content {
                max-height: 100%!important;
                height: 100%!important;
                .ant-modal-body {
                    margin-top: 0;
                }
            }
        }
    }
}
</style>
<style lang="less" scoped>

</style>